<template>
    <el-card>
        <div class="title-bar">
            <div>
                <div></div>
                <span permission="新增居民档案">新建居民档案</span>
            </div>
        </div>
        <div class="message-bar">
            <span>居民信息</span>
            <el-form ref="ruleFormRef" :rules="rules" label-width="80" :inline="true" :model="formData"
                class="demo-form-inline" style="--el-font-size-base:13px;">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="formData.name">
                    </el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="IDnumber">
                    <el-input v-model="formData.IDnumber">
                    </el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-select clearable v-model="formData.gender">
                        <el-option value="1" label="男" />
                        <el-option value="0" label="女" />
                    </el-select>
                </el-form-item>
                <el-form-item label="出生年月" prop="birthday">
                    <el-date-picker v-model="formData.birthday" type="date" placeholder="请选择日期"
                        style="width: 200px;height: 40px;" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label=" 联系电话" prop="phone">
                    <el-input placeholder="居民登录账号，请正确输入" v-model="formData.phone">
                    </el-input>
                </el-form-item>
                <el-form-item label="现居地">
                    <el-input placeholder="请输入" style="width: 200px;" v-model="formData.address">
                    </el-input>
                </el-form-item>
                <el-form-item label="居民标签">
                    <el-select v-model="formData.tags" clearable>
                        <el-option value="" label="请选择" />
                        <el-option v-for="item in tagData" :label="item.name" :key="item._id"
                            :value="item._id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="家庭成员">
                    <div :class="{ 'addPart': true, 'notId': !nowResident }" style="cursor: pointer;"
                        @click="addRelation">
                        +关联家庭成员</div>
                </el-form-item>
                <el-form-item label="登录密码" prop="password">
                    <el-input placeholder="8位以上的数字和字母组合" v-model="formData.password">
                    </el-input>
                </el-form-item>
            </el-form>
        </div>


        <div class="button-bar">
            <el-button type="primary" @click="toAdd(ruleFormRef)">保存</el-button>
            <el-button type="primary" @click="openGive" :disabled="!nowResident" permission="编辑居民档案">完善居民档案</el-button>
            <el-button type="success" @click="toAddSign" :disabled="!nowResident">立即签约</el-button>
            <el-button @click="$router.back">返回</el-button>
        </div>
    </el-card>
    <AddRelation ref="relationRef"></AddRelation>
</template>

<script setup>
import { onMounted, ref, useTemplateRef } from 'vue';
import { findTagsApi } from '../../api/tags';
import { addResidentApi } from '../../api/resident';
import { useRouter } from 'vue-router';
import AddRelation from './AddRelation.vue';
const router = useRouter()
const formData = ref({
    name: '',
    IDnumber: '',
    gender: '',
    birthday: '',
    phone: '',
    address: '',
    tags: [],
    password: ''
})

onMounted(() => {
    findTag()
})



// 标签数据
const tagData = ref([])

function findTag() {
    findTagsApi()
        .then(res => {
            if (res.code == 200) {
                tagData.value = res.data.rows
            }
        })
}

// 当前保存居民
const nowResident = ref('')

// 跳转新增签约
function toAddSign() {
    router.push('/sign/update/' + nowResident.value)

}

const relationRef = useTemplateRef('relationRef')
// 添加关系
function addRelation() {
    relationRef.value?.addRelationship(nowResident.value)
}


// 表单验证
const rules = ref({
    phone: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },

    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
        },
    ],
    name: [
        {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur',
        },
    ],
    birthday: [
        {
            required: true,
            message: '生日不能为空',
            trigger: 'blur',
        },
    ],
    IDnumber: [
        {
            required: true,
            message: '身份证号不能为空',
            trigger: 'blur',
        },
    ],
    gender: [
        {
            required: true,
            message: '性别不能为空不能为空',
            trigger: 'blur',
        },
    ],
})
const ruleFormRef = ref()



// 添加居民
function addResident() {
    addResidentApi({
        ...formData.value,
    })
        .then(res => {
            if (res.code == 200) {

                ElMessage({
                    message: '居民信息添加成功',
                    type: 'success',
                })
                nowResident.value = res.data._id
            } else {
                ElMessage.error(res.message)
            }
        })
}

// 保存
const toAdd = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            addResident()
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<style scoped>
.title-bar {
    height: 40px;
    border-bottom: 1px solid #dbdbdb;

}

.title-bar>view {
    height: 20px;
    display: flex;
    align-items: center;
}

.title-bar>view>view {
    height: 20px;
    background-color: var(--el-color-primary);
    width: 6px;
    border-radius: 16px;
    margin-right: 15px;
}

.title-bar span {
    color: var(--el-title-font-color);
    font-size: var(--el-title-font-size);
    font-weight: var(--el-title-font-weight);
}

.message-bar span {
    display: inline-block;
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
}



.el-form-item .addPart {
    width: 200px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    font-weight: 400;
    color: #2984F8 !important;
}

.message-bar {
    border-bottom: 1px solid #dbdbdb;
    margin-top: 20px;
}

.el-form-item div {
    height: 40px;
    width: 200px;
    line-height: 40px;
    font-size: 13px;
    color: #333;
}

.el-input,
.el-select {
    width: 200px;
    height: 40px;
}

.el-form-item {
    margin-right: 100px;
    margin-bottom: 15px;
}

.button-bar {
    height: 40px;
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
    margin-bottom: 20px;
}

.el-form-item .notId {
    color: #999 !important;
}
</style>